<template>
  <div>
    <div class="top zone-wrap">
      <div class="title-con flex-between">
        <div class="left">
          <div class="flex-center">
            <div class="icon"></div>
            <div class="title">媒体报道</div>
          </div>
        </div>
      </div>
      <div class="media-list flex">
        <div
          :class="lengthFun(index, mediaData.length)"
          v-for="(item, index) in mediaData"
          :key="item + index"
          @click="tomtDetail(item.articleId, item.source)"
        >
          <div class="logo" style="border: 1px solid #ccc">
            <img :src="'data:image/jpeg;base64,' + item.image" alt="" srcset="" />
          </div>
          <div class="rig">
            <div class="title">{{ item.title }}</div>
            <div class="description two-line-ellipsis">
              {{ item.content }}
            </div>
            <div class="from">
              <span class="link">{{ item.source }}</span
              >&nbsp;&nbsp;&nbsp;&nbsp; <span class="time">{{ item.date }}</span
              >&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
          </div>
        </div>
      </div>
      <!-- 分页器： -->
      <!-- 全功能： layout="total, sizes, prev, pager, next, jumper" -->
      <div class="page_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageCurrent"
          :page-sizes="pageSizes"
          :page-size="aTPageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- <div class="bottom zone-wrap">
      <div class="title-con flex-between">
        <div class="left">
          <div class="flex-center">
            <div class="icon"></div>
            <div class="title">媒体报道</div>
          </div>
        </div>
        <div class="right flex-center">
          <div class="legends flex-center">
            <div
              class="legend flex-center"
              @click="changeChooseid(0)"
              :class="chooseid == 0 ? 'active' : ''"
            >
              今日
            </div>
            <div
              class="legend flex-center"
              @click="changeChooseid(1)"
              :class="chooseid == 1 ? 'active' : ''"
            >
              本周
            </div>
            <div
              class="legend flex-center"
              @click="changeChooseid(2)"
              :class="chooseid == 2 ? 'active' : ''"
            >
              本月
            </div>
            <div
              class="legend flex-center"
              @click="changeChooseid(3)"
              :class="chooseid == 3 ? 'active' : ''"
            >
              全年
            </div>
          </div>
          <el-date-picker
            size="mini"
            v-model="datePickerValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="sum-num flex-center-start">
        <div class="tit">累计发布数</div>
        <div class="desc">666</div>
      </div>
      <div class="chart-con" ref="chartCon"></div>
    </div> -->
  </div>
</template>

<script>
// const echarts = require("echarts/lib/echarts");
// require("echarts/lib/chart/line");
// // 引入提示框和标题组件
// require("echarts/lib/component/tooltip");
// require("echarts/lib/component/title");
export default {
  props: {
    mediaData: {
      type: Array,
    },
    aTPageSize: {
      // type: Array,
    },
    total: {},
    pageCurrent: {},
    // mediaActivityChart: {
    //   type: Array,
    // },
  },
  computed: {
    // 总个数：
    // total() {
    //   let num = 0;
    //   if (this.mediaData.length) {
    //     num = this.mediaData.length;
    //   }
    //   return num;
    // },
  },
  watch: {
    // mediaData() {
    //   let a = this.mediaData[this.currentPage - 1];
    //   // console.log("哒哒哒大", a);
    //   if (a) {
    //     this.pageArr = a;
    //   } else {
    //     this.pageArr = [];
    //   }
    // },
    // currentPage() {
    //   // let a = this.mediaData[this.currentPage - 1];
    //   // console.log("哒哒哒大", a);
    //   // if (a) {
    //   //   this.pageArr = a;
    //   // } else {
    //   //   this.pageArr = [];
    //   // }
    // },
  },
  data() {
    return {
      // 分页器选项:
      currentPage: 2, //起始页
      pageSizes: [5, 10, 50, 100], //分页选项(已隐藏)
      // aPageSize: 8, //默认选中的每页几个,
      // total: 0, //总个数
      // pageArr: [],
      mediaArr: [], //赋值
      myChart: null,
      chooseid: 0,
      mediaList: [
        {
          logo: require("@/assets/common/u55.png"),
          title: "「共和党」标题标题标题",
          description:
            "美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与",
          link: "环球网",
          time: "2020-10-01 18:00",
        },
        {
          logo: require("@/assets/common/u55.png"),
          title: "「共和党」标题标题标题",
          description:
            "美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与",
          link: "环球网",
          time: "2020-10-01 18:00",
        },
        {
          logo: require("@/assets/common/u55.png"),
          title: "「共和党」标题标题标题",
          description:
            "美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与",
          link: "环球网",
          time: "2020-10-01 18:00",
        },
        {
          logo: require("@/assets/common/u55.png"),
          title: "「共和党」标题标题标题",
          description:
            "美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与",
          link: "环球网",
          time: "2020-10-01 18:00",
        },
        {
          logo: require("@/assets/common/u55.png"),
          title: "「共和党」标题标题标题",
          description:
            "美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与",
          link: "环球网",
          time: "2020-10-01 18:00",
        },
        {
          logo: require("@/assets/common/u55.png"),
          title: "「共和党」标题标题标题",
          description:
            "美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与美防长称要在所有领域与",
          link: "环球网",
          time: "2020-10-01 18:00",
        },
      ],

      // xData: [],
      // yData: [],
    };
  },
  mounted() {
    console.log("这是几", this.pageCurrent);
  },
  methods: {
    //分页Fun： 数组，每页个数：num
    pageFun(arr, num = 10) {
      let a = [];
      arr.forEach((item, idx) => {
        let i = Math.floor(idx / num);
        if (!a[i]) {
          a[i] = [];
        }
        a[i].push(item);
      });
      return a;
    },
    // 我不需要线
    lengthFun(idx, length) {
      let num = 1;
      if (length % 2 == 0) {
        num = 2;
      }
      let c = ["media-item", "flex-center"];
      if (idx < length - num) {
        c.push("border-bottom-1px");
      }
      return c;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // this.currentPage = val;
      // 页面数
      sessionStorage.currentPage = val + "";
      this.$emit("getMediaData", val);
    },
    changeChooseid(id) {
      this.chooseid = id;
    },

    // 点击进入详情页
    tomtDetail(data, source) {
      // console.log("搞不懂了", source);
      localStorage.whereGo = "tendency";
      // 来源
      sessionStorage.dataSource = source;

      this.$router.push({
        path: `/mainDetail/mtDetail/${data}`,
      });
    },
    // 处理折线图数据
    // setChartData() {
    //   this.mediaActivityChart.activityList.map((item, index) => {
    //     this.xData.push(item.year);
    //     this.yData.push(item.number);
    //   });
    // },
    // initChart() {
    //   this.myChart = echarts.init(this.$refs.chartCon);
    //   console.log(9999, this.myChart);
    //   this.setChartData();
    //   let option = {
    //     // backgroundColor: "#fff",
    //     title: {
    //       show: false,
    //       text: "",
    //       left: "12%",
    //       top: "13%",
    //       textStyle: {
    //         color: "#999",
    //         fontSize: 14,
    //       },
    //     },
    //     grid: {
    //       left: "3%",
    //       top: "3%",
    //       right: "3%",
    //       bottom: "11%",
    //     },
    //     legend: {
    //       show: false,
    //       icon: "circle",
    //       top: "13%",
    //       itemWidth: 6,
    //       itemHeight: 6,
    //       itemGap: 25,
    //     },
    //     tooltip: {
    //       textStyle: {
    //         color: "#999",
    //       },
    //       trigger: "axis",
    //       backgroundColor: "#ffffff",
    //       extraCssText: "box-shadow: 0px 0px 6px rgba(186, 194, 219, 1);",
    //     },
    //     xAxis: [
    //       {
    //         type: "category",
    //         data: this.xData,
    //         axisLine: {
    //           lineStyle: {
    //             color: "#ddd",
    //           },
    //         },
    //         axisTick: {
    //           show: false,
    //         },
    //         axisLabel: {
    //           interval: 0,
    //           textStyle: {
    //             color: "rgba(0, 0, 0, 0.647)",
    //           },
    //           margin: 15,
    //         },
    //         boundaryGap: false,
    //       },
    //     ],
    //     yAxis: [
    //       {
    //         type: "value",
    //         axisTick: {
    //           show: false,
    //         },
    //         axisLine: {
    //           lineStyle: {
    //             color: "#ddd",
    //           },
    //         },
    //         axisLabel: {
    //           textStyle: {
    //             color: "rgba(0, 0, 0, 0.647)",
    //           },
    //         },
    //         splitLine: {
    //           show: true,
    //           lineStyle: {
    //             type: "dashed",
    //             // color: "#999999"
    //           },
    //         },
    //       },
    //     ],
    //     series: [
    //       {
    //         name: "发布数",
    //         type: "line",
    //         data: this.yData,
    //         symbolSize: 6,
    //         symbol: "circle",
    //         smooth: true,
    //         lineStyle: {
    //           color: "rgba(45, 115, 255, 1)",
    //         },
    //         itemStyle: {
    //           normal: {
    //             color: "rgba(45, 115, 255, 1)",
    //             borderColor: "rgba(45, 115, 255, 1)",
    //           },
    //         },
    //         areaStyle: {
    //           color: "#DCECFF",
    //         },
    //         emphasis: {
    //           itemStyle: {
    //             color: {
    //               type: "radial",
    //               x: 0.5,
    //               y: 0.5,
    //               r: 0.5,
    //               colorStops: [
    //                 {
    //                   offset: 0,
    //                   color: "rgba(45, 115, 255, 1)",
    //                 },
    //                 {
    //                   offset: 0.4,
    //                   color: "rgba(45, 115, 255, 1)",
    //                 },
    //                 {
    //                   offset: 0.5,
    //                   color: "#fff",
    //                 },
    //                 {
    //                   offset: 0.7,
    //                   color: "#fff",
    //                 },
    //                 {
    //                   offset: 0.8,
    //                   color: "#fff",
    //                 },
    //                 {
    //                   offset: 1,
    //                   color: "#fff",
    //                 },
    //               ],
    //             },
    //             borderColor: "rgba(45, 115, 255, 1)",
    //             borderWidth: 2,
    //           },
    //         },
    //       },
    //     ],
    //   };
    //   this.myChart.setOption(option);
    // },
  },
};
</script>

<style lang="scss" scoped>
.page_box {
  display: flex;
  justify-content: flex-end;
}
.zone-wrap {
  background: white;
  padding: 0.2rem 0.2rem 0.2rem 0.2rem;
  border-width: 0.02rem;
  border-style: solid;
  border-color: rgba(45, 115, 255, 1);
  border-left: 0px;
  border-right: 0px;
  border-bottom: 0px;
}
.title-con {
  margin-bottom: 0.2rem;
  .icon {
    margin-right: 0.1rem;
    width: 0.04rem;
    height: 0.22rem;
    background-image: url(~@/assets/common/title-item.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  .title {
    font-weight: 500;
    font-size: 0.22rem;
    color: rgba(0, 0, 0, 0.847);
  }
}
.media-list {
  flex-wrap: wrap;
  max-height: 600px;
  overflow: hidden;
  .media-item {
    width: 6.52rem;
    padding-bottom: 0.3rem;
    margin: 0.1rem 0.5rem 0.1rem 0;
    .logo {
      margin-right: 0.1rem;
      width: 175px;
      height: 116px;
      // background-image: url(~@/assets/common/u423.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      margin-bottom: 0.1rem;
      font-weight: 700;
      font-style: normal;
      font-size: 0.16rem;
      line-height: 0.18rem;
    }
    .description {
      font-size: 0.12rem;
      -webkit-line-clamp: 4;
      width: 4.66rem;
      height: 71px;
      overflow: hidden;
      line-height: 18px;
      color: #656565;
    }
    .from {
      margin-top: 0.1rem;
      font-weight: 400;
      font-style: normal;
      font-size: 0.12rem;
      color: rgba(0, 0, 0, 0.247);
      line-height: 0.18rem;
      .link {
        margin-right: 0.1rem;
        // color: #108ee9;
      }
      .time {
        color: rgba(0, 0, 0, 0.247);
      }
    }
  }
}
.bottom {
  margin-top: 0.2rem;
  .legends {
    margin-right: 0.1rem;
    line-height: 1;
    .legend {
      width: 0.45rem;
      height: 0.24rem;
      font-weight: 400;
      font-size: 0.14rem;
      color: rgba(0, 0, 0, 0.647);
      &.active {
        background-color: #0f69b2;
        color: rgb(255, 255, 255);
      }
    }
  }
  .sum-num {
    margin-top: 0.08rem;
    height: 0.4rem;
    line-height: 1;
    .tit {
      margin-right: 0.2rem;
      font-size: 0.14rem;
      color: rgba(0, 0, 0, 0.4);
    }
    .desc {
      font-size: 0.24rem;
      color: rgba(0, 0, 0, 0.84);
    }
  }
  .chart-con {
    // margin-top: 0.2rem;
    height: 3.1rem;
  }
}
</style>
